<template>
    <div class="staffSkillsAdd">
        <Modal :mask-closable="false" v-model="createStatus" :title="addtitle" class="modal-content-item-layout" @on-cancel="goBack" width="1200" :styles="{top: '20px'}">
            <div class="addProject">
                <div class="content-item">
                    <span class="content-item-title">{{ $t('员工') }}</span>
                    <div class="pd16">
                        <Form ref="formValidate" class="formList" :model="formItem" label-position="top">
                            <Row :gutter="24">
                                <!-- <Col span="6">
                                    <FormItem :label="`${$t('部门')}`">
                                        <Select  v-model="companyCode" clearable :disabled="editShowF" :placeholder="`${$t('common.selectInfo')}`" @on-change="getUserNo">
                                            <Option v-for="(item, index) of departmentList" :value="item.id" :label="item.deptName" :key="index"></Option>
                                        </Select>
                                    </FormItem>
                                </Col> -->
                                <Col span="6">
                                    <FormItem :label="`${$t('员工工号/姓名')}`">
                                        <!-- <Select  v-model="employeeId" :disabled="editShowF" clearable :placeholder="`${$t('common.selectInfo')}`">
                                            <Option v-for="(item,index) of userNoArr" :value="item.id" :key="index">{{ item.empno+'-'+item.realName }}</Option>
                                        </Select> -->
                                        <Select  v-model="employeeId" :disabled="editShowF" filterable clearable :placeholder="`${$t('common.selectInfo')}`" @on-query-change="timeOutgetUserNo">
                                            <Option v-for="(item,index) of userNoArr" :value="item.id" :key="index">{{ item.empno+'-'+item.realname }}</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span="6">
                                    <FormItem :label="`${$t('员工工号')}`">
                                        <Select  v-model="employeeId" disabled placeholder="" >
                                            <Option v-for="(item,index) of userNoArr" :value="item.id" :key="index">{{ item.empno }}</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span="6">
                                    <FormItem :label="`${$t('员工姓名')}`">
                                        <Select  v-model="employeeId" disabled placeholder="" >
                                            <Option v-for="(item,index) of userNoArr" :value="item.id" :key="index">{{ item.realname }}</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                </div>
                <div class="content-item">
                    <span class="content-item-title">{{ $t('技能复数') }}</span>
                    <div class="pd16">
                        <Form ref="formValidate" class="formList " :model="formItem" label-position="top">
                            <Row :gutter="24">
                                <Col span="18">
                                    <Row :gutter="24">
                                    <Col span="8">
                                        <FormItem :label="`${$t('类型')}`">
                                            <Select  v-model="formItem.skillsTypeId" clearable :placeholder="`${$t('common.selectInfo')}`" @on-change="setSkillDev">
                                                <Option v-for="(item,index) of typeList1" :value="item.id" :key="index">{{ enShowF?item.enValue:item.value }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="8">
                                        <FormItem :label="`${$t('设备')}`">
                                            <Select  v-model="formItem.skillsDeviceId" :disabled="formItem.skillsTypeId===indexId" clearable :placeholder="`${$t('common.selectInfo')}`">
                                                <Option v-for="(item,index) of typeList2" :value="item.id" :key="index">{{ enShowF?item.enValue:item.value }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="8">
                                        <FormItem :label="`${$t('技能')}`">
                                            <Select  v-model="formItem.skillId" clearable :placeholder="`${$t('common.selectInfo')}`">
                                                <Option v-for="(item,index) of typeList3" :value="item.id" :key="index">{{ enShowF?item.enValue:item.value }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="8">
                                        <FormItem :label="`${$t('技能等级')}`">
                                            <Select  v-model="formItem.levelId" clearable :placeholder="`${$t('common.selectInfo')}`">
                                                <Option v-for="(item,index) of levelList" :value="item" :key="index">{{ item }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    </Row>
                                </Col>
                                <Col span="6">
                                    <FormItem :label="`${$t('资质证书')}`">
                                        <Upload
                                            ref="addupload"
                                            multiple
                                            type="drag"
                                            :action="fileUploadUrl"
                                            :on-success="handleSuccess"
                                            :on-remove="deleteFile"
                                            :on-error="uploadErro"
                                            :before-upload="beforeUpload"
                                            :data="{dir:'device'}"
                                            :disabled ="disabledF"
                                            >
                                            <div style="padding: 20px 0">
                                                <Icon type="md-document" size="52" style="color: #3399ff"></Icon>
                                                <p>{{ $t('点击或者拖拽上传') }}</p>
                                                <p>{{ $t('支持扩展名:.pdf .doc .docx') }}</p>
                                            </div>
                                        </Upload>
                                    </FormItem>
                                </Col>
                                <Col span="24" align="center">
                                    <Button type="primary" style="margin:10px 10px 10px 0;width:120px;" @click="addToList">{{ $t('保存添加') }}</Button>
                                    <Button type="default" style="width:120px;" @click="resetClick">{{ $t("common.reset") }}</Button>
                                </Col>
                                <Col span="24" align="center">
                                    <div class="tableContent">
                                        <Table stripe :columns="columns1" :data="data1" max-height="280">
                                            <template slot-scope="{ row ,index}" slot="action">
                                                <span class="operationBtn" @click="delPrrShowH(index,row)"><i
                                                    class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span>
                                            </template>
                                        </Table>
                                    </div>
                                    
                                </Col>
                                
                            </Row>
                        </Form>
                    </div>
                </div>
            </div>
            
            <div slot="footer">
                <Button type="default" @click="goBack">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="handleSubmit()">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {findOrgByLevel} from "@/api/index.js";
import util from '@/util/util'
export default {
    name: "staffSkillsAdd",
    components: {},
    props: ['createStatusF', 'addtitleF','editDataF'],
    data() {
        return {
            disabledF:false,
            editData:this.editDataF,
            fileUploadUrl: "",
            addtitle: this.addtitleF,
            createStatus: this.createStatusF,
            formItem: {},
            companyCode:'',
            employeeId:'',
            companyList:[],
            userNoArr:[],
            typeList1:[],
            typeList2:[],
            typeList3:[],
            indexId:null,
            levelList:[0,1,2,3,4],
            columns1: [
                {
                    title: this.$t('类型'),
                    align: 'center',
                    key: 'typeName'
                },
                {
                    title: this.$t('设备'),
                    align: 'center',
                    key: 'devName'
                },
                {
                    title: this.$t('技能'),
                    align: 'center',
                    key: 'skillName'
                },
                {
                    title: this.$t('技能等级'),
                    align: 'center',
                    key: 'levelId'
                },
                {
                    title: this.$t('资质证书'),
                    align: 'center',
                    key: 'certification',
                    render: (h, params) => {
                        if(params.row.certification==false){
                            return h('div', [
                                h('span',{}, '❌')
                            ]);
                        }else{
                            return h('div', [
                                h('span',{}, '⭕')
                            ]);
                        }
                    }
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    width: 150,
                    align: "center"
                }
            ],
            data1: [],
            fileList:[],
            enShowF:false,
            departmentList:[],
            editShowF:false,
        }
    },
    watch:{
        fileList() {
            if(this.fileList.length>=1){
                this.disabledF = true
            }else{
                this.disabledF = false
            }
        },
    },
    mounted() {
        if(window.localStorage.getItem('language') ==='en_US'){
            this.enShowF = true
        }else{
            this.enShowF = false
        }
        if(this.editData.length>0){
            this.editShowF = true
        }
        this.fileUploadUrl = `${util.getEnv()}/fileServer/upload`
        this.getSkills()
        this.getDept();
    },
    methods: {
        getDept() {
            let data = {
                deptName: '',
                pageNo: 1,
                pageSize: 1000,
            };
            this.axios({
                method: 'post',
                url: '/basic/dept/list',
                data
            }).then(res => {
                if (res.code === 200) {
                    this.departmentList = res.data.list
                    if(this.editData.length>0){
                        this.companyCode = this.editData[0].deptId
                        this.getUserNo(this.editData[0].employeeNo)
                    }
                }
            })
        },
        setSkillDev(query){
            if(query===this.indexId){
                this.formItem.skillsDeviceId = null
            }
        },
        handleSubmit(){
            if (this.employeeId === null || this.employeeId === undefined || this.employeeId === "") {
                this.$Message.warning(({content: this.$t('请选择员工'), duration: 6, closable: true}));
                return false;
            }
            if (this.data1.length<1) {
                this.$Message.warning(({content: this.$t('请添加技能'), duration: 6, closable: true}));
                return false;
            }
            let params = this.data1.map((item) => {
                const {certification,files,levelId,skillId,skillsDeviceId,skillsTypeId,id} = item
                return {certification,files,levelId,skillId,skillsDeviceId,skillsTypeId,id,employeeId:this.employeeId}   
            })
            if(this.addtitle===this.$t('新增')){
                this.axios({
                    method: 'post',
                    url: '/dms/dmsEmployeeSkillMatrix/add',
                    data: {
                        dmsEmployeeSkillMatrixDTOs:params
                    }
                }).then(res => {
                    if(res.code === 200){
                        this.$emit('cancle',true)
                        this.$Message.success(res.msg);
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            }else{
                this.axios({
                    method: 'post',
                    url: '/dms/dmsEmployeeSkillMatrix/edit',
                    data: {
                        dmsEmployeeSkillMatrixDTOs:params
                    }
                }).then(res => {
                    if(res.code === 200){
                        this.$emit('cancle',true)
                        this.$Message.success(res.msg);
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            }
            
        },
        delPrrShowH(index,row){
          if (row.id){
            this.axios({
              method: 'post',
              url: '/dms/dmsEmployeeSkillMatrix/deleteBatch',
              data: {
                delIds: [row.id]
              }
            }).then(res => {
              if(res.code === 200){
                this.data1.some((item, i)=>{
                  if(i === index){
                    this.data1.splice(i, 1)
                    return true
                  }
                })
                if ( this.data1.length < 1){
                  this.$emit('change')
                }
                this.$Message.success(res.msg);
              }else{
                this.$Message.warning(({content:res.msg,duration:6,closable:true}));
              }
            })
          }else{
            this.data1.some((item, i)=>{
              if(i === index){
                this.data1.splice(i, 1)
                return true
              }
            })
          }
        },
        addToList(){
            if (this.formItem.skillsTypeId === null || this.formItem.skillsTypeId === undefined || this.formItem.skillsTypeId === "") {
                this.$Message.warning(({content: this.$t('请选择类型'), duration: 6, closable: true}));
                return false;
            }
            if (this.formItem.skillsTypeId!==this.indexId&&(this.formItem.skillsDeviceId === null || this.formItem.skillsDeviceId === undefined || this.formItem.skillsDeviceId === "")) {
                this.$Message.warning(({content: this.$t('请选择设备类型'), duration: 6, closable: true}));
                return false;
            }
            if (this.formItem.skillId === null || this.formItem.skillId === undefined || this.formItem.skillId === "") {
                this.$Message.warning(({content: this.$t("请选择技能"), duration: 6, closable: true}));
                return false;
            }
            if (this.formItem.levelId === null || this.formItem.levelId === undefined || this.formItem.levelId === "") {
                this.$Message.warning(({content: this.$t("请选择技能等级"), duration: 6, closable: true}));
                return false;
            }
            let showF = false
            this.data1.some((item, i) => {
                if(this.formItem.skillsTypeId===item.skillsTypeId&&this.formItem.skillsDeviceId===item.skillsDeviceId&&this.formItem.skillId===item.skillId){
                    this.$Message.warning(({content: this.$t("该技能已添加"), duration: 6, closable: true}));
                    showF = true
                    return true;
                }
            })
            if(showF){
                return false;
            }
            let data = {}
            this.typeList1.some((item, i) => {
                if (item.id === this.formItem.skillsTypeId) {
                    data.typeName = this.enShowF?item.enValue:item.value
                }
            })
            this.typeList2.some((item, i) => {
                if (item.id === this.formItem.skillsDeviceId) {
                    data.devName = this.enShowF?item.enValue:item.value
                }
            })
            this.typeList3.some((item, i) => {
                if (item.id === this.formItem.skillId) {
                    data.skillName = this.enShowF?item.enValue:item.value
                }
            })
            
            this.data1.unshift({...this.formItem,...data,files:this.fileList,certification:this.fileList.length>0})
            this.formItem = {}
            this.fileList = []
            this.$refs.addupload.clearFiles()
        },
        resetClick(){
            this.formItem = {}
            this.fileList = []
            this.$refs.addupload.clearFiles()
        },
        uploadErro(response) {
            this.$Message.warning({ content: response, duration: 6, closable: true })
        },
        beforeUpload(file) {
            const reg = /\.(pdf)|(doc)|(docx)$/
            if (!file.name.toLowerCase().match(reg)) {
                this.$Message.warning(({content:this.$t("请上传pdf,doc,docx文件!"),duration:6,closable:true}));
                return false
            }
        },
        handleSuccess(file) {
            const {fileName, filepath, fileUrl, suffix,fileLength} = file.data;
            const file1 = Object.assign({
                fileName, filePath: filepath, fileUrl,suffix,fileDescription:'',fileDocumentEnumPath:"EMPLOYEES_CERTIFICATE",fileSize:fileLength
            })
            this.fileList.push(file1)
            this.$forceUpdate()
        },
        deleteFile(file) {
            this.fileList.some((item, i) => {
                if (item.fileName === file.name) {
                    this.fileList.splice(i, 1)
                }
            })
            this.$forceUpdate()
        },
        goBack() {
            this.$emit('cancle',false)
        },
        getCompanyList() {
            findOrgByLevel({level: 3}).then(res => {
                if (res.code === 200) {
                    this.companyList = res.data
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        //延时查询
        timeOutgetUserNo(query){
            clearTimeout(this.timeout);
            let isSearchF =false;
            this.timeout = setTimeout(() => {
                if(query !=""){
                    for(let item of this.userNoArr){
                        if(item.empno==query||item.empno+'-'+item.realname==query||item.realname==query){
                            isSearchF = true
                        }
                    }
                    if(isSearchF==false){
                        this.getUserNo(query);
                    }
                }
            }, 500);
        },
        getUserNo(query){
            this.axios({
                method: 'get',
                url: '/basic/user/searchUser',
                params: {
                    key:query
                }
            }).then(res => {
                if(res.code === 200){
                    this.userNoArr = res.data
                    if(this.editData.length>0){
                        this.employeeId = this.editData[0].employeeId
                    }
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        // getUserNo(query){
        //     this.axios({
        //         method: 'post',
        //         url: '/dms/dmsEmployeeSkillMatrix/queryUser',
        //         data: {
        //             departmentId:query
        //         }
        //     }).then(res => {
        //         if(res.code === 200){
        //             this.userNoArr = res.data
        //             if(this.editData.length>0){
        //                 this.employeeId = this.editData[0].employeeId
        //             }
        //         }else{
        //             this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        //         }
        //     })
        // },
        getSkills(){
            this.axios({
                method: 'post',
                url: '/dms/dmsEmployeeSkillMatrix/queryDict',
                data: {
                    names:'技能类型,设备类型,技能'
                }
            }).then(res => {
                if(res.code === 200){
                    if(res.data&&res.data.length>0){
                        for(let item of res.data){
                            if(item.name==='技能类型'){
                                this.typeList1.push(item)
                            }
                            if(item.name==='设备类型'){
                                this.typeList2.push(item)
                            }
                            if(item.name==='技能'){
                                this.typeList3.push(item)
                            }
                        }
                        for(let item of this.typeList1){
                            if(item.value==='其他技能'){
                                this.indexId = item.id
                            }
                        }
                        if(this.editData.length>0){
                            for(let obj of this.editData){
                                this.typeList1.some((item, i) => {
                                    if (item.id === obj.skillsTypeId) {
                                        obj.typeName = this.enShowF?item.enValue:item.value
                                    }
                                })
                                this.typeList2.some((item, i) => {
                                    if (item.id === obj.skillsDeviceId) {
                                        obj.devName = this.enShowF?item.enValue:item.value
                                    }
                                })
                                this.typeList3.some((item, i) => {
                                    if (item.id === obj.skillId) {
                                        obj.skillName = this.enShowF?item.enValue:item.value
                                    }
                                })
                                this.data1.push({...obj,certification:obj.certification})
                            }
                        }
                    }
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
    }
}
</script>
<style scoped>

</style>
<style lang="scss" scoped>
/deep/.ivu-select-disabled .ivu-select-selection{
    background:#f3f3f3 !important
}

</style>
